<template>
  <el-card shadow="never" class="aui-card--fill">
    <div class="mod-demo__dhsportapplyinfo}">
      <el-form :inline="true">
        <el-form-item>
          <el-input v-model="sportId" placeholder="请输入活动编号进行查询" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="getDataListBySportId"></el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="success" @click="dialogFormVisibleONE = true">发起新的户外运动</el-button>
        </el-form-item>
      </el-form>
      <!--发起新活动弹出框-->
      <el-dialog title="填写活动信息" :visible.sync="dialogFormVisibleONE" width="30%">
        <el-form ref="ruleForm" :model="newSportForm" label-width="120px" :rules="rules">
          <el-form-item label="活动名称" prop="sportName">
            <el-select v-model="newSportForm.sportName" placeholder="请选择">
              <el-option v-for="item in nameOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="活动地点" prop="sportAddress">
            <el-input v-model="newSportForm.sportAddress"></el-input>
          </el-form-item>
          <el-form-item label="活动开始时间" prop="startTime">
            <el-date-picker v-model="newSportForm.startTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss"
                            placeholder="选择日期时间"></el-date-picker>
          </el-form-item>
          <el-form-item label="活动结束时间" prop="endTime">
            <el-date-picker v-model="newSportForm.endTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss"
                            placeholder="选择日期时间"></el-date-picker>
          </el-form-item>
          <el-form-item label="上限人数" prop="upper">
            <el-input-number v-model="newSportForm.upper" :min="0"></el-input-number>
          </el-form-item>
          <el-form-item label="活动组织人" prop="sportLeader">
            <el-select v-model="newSportForm.sportLeader" placeholder="请选择">
              <el-option v-for="item in leaderOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="交通方式">
            <el-input v-model="newSportForm.traffic" :disabled="true"></el-input>
          </el-form-item>
        </el-form>
        <template slot="footer">
          <el-button @click="dialogFormVisibleONE = false">{{ $t('cancel') }}</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
          <el-button type="primary" @click="newSport('ruleForm')">立即创建</el-button>
        </template>
      </el-dialog>
      <!--报名详细信息弹出框-->
      <el-dialog title="报名详细信息" :visible.sync="dialogFormVisibleTWO" width="30%">
        <el-form ref="form" :model="registrationDetails" label-width="120px">
          <el-form-item label="活动编号">
            <el-input v-model="registrationDetails.sportId"></el-input>
          </el-form-item>
          <el-form-item label="活动名称">
            <el-input v-model="registrationDetails.sportName"></el-input>
          </el-form-item>
          <el-form-item label="报名人账号">
            <el-input v-model="registrationDetails.userId"></el-input>
          </el-form-item>
          <el-form-item label="报名人姓名">
            <el-input v-model="registrationDetails.userName"></el-input>
          </el-form-item>
          <el-form-item label="活动地址">
            <el-input v-model="registrationDetails.sportAddress"></el-input>
          </el-form-item>
          <el-form-item label="活动开始时间">
            <el-input v-model="registrationDetails.startTime"></el-input>
          </el-form-item>
          <el-form-item label="活动结束时间">
            <el-input v-model="registrationDetails.endTime"></el-input>
          </el-form-item>
          <el-form-item label="活动组织人">
            <el-input v-model="registrationDetails.sportLeader"></el-input>
          </el-form-item>
        </el-form>
        <template slot="footer">
          <el-button type="danger" @click="dialogFormVisibleTWO = false">关闭</el-button>
        </template>
      </el-dialog>
      <el-table v-loading="dataListLoading" :data="dataList" border @selection-change="dataListSelectionChangeHandle"
                style="width: 100%;">
        <el-table-column prop="sportId" label="户外运动编号" header-align="center" align="center"></el-table-column>
        <el-table-column prop="userId" label="用户账号" header-align="center" align="center"></el-table-column>
        <el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="150">
          <template slot-scope="scope">
            <el-button type="success" size="small" @click="viewDetails(scope.row.sportId,scope.row.userId)">查看详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          :current-page="page"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="limit"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="pageSizeChangeHandle"
          @current-change="pageCurrentChangeHandle">
      </el-pagination>
      <!-- 弹窗, 新增 / 修改 -->
      <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
    </div>
  </el-card>
</template>

<script>
import mixinViewModule from '@/mixins/view-module'
import AddOrUpdate from './dhsportapplyinfo-add-or-update'

export default {
  mixins: [mixinViewModule],
  data() {
    return {
      mixinViewModuleOptions: {
        getDataListURL: '/demo/dhsportapplyinfo/page',
        getDataListIsPage: true,
        exportURL: '/demo/dhsportapplyinfo/export',
        deleteURL: '/demo/dhsportapplyinfo',
        deleteIsBatch: true
      },
      sportId: '',
      dataListBySportId: [],
      dialogFormVisibleONE: false,
      newSportForm: {
        sportName: '',
        sportAddress: '',
        startTime: '',
        endTime: '',
        upper: '',
        sportLeader: '',
        traffic: '俱乐部提供接送服务，您也可以自驾前往。'
      },
      rules: {
        sportName: [
          {required: true, message: '请输入活动名称', trigger: 'blur'}
        ],
        sportAddress: [
          {required: true, message: '请输入活动地点', trigger: 'blur'}
        ],
        startTime: [
          {required: true, message: '请选择日期、时间', trigger: 'blur'}
        ],
        endTime: [
          {required: true, message: '请选择日期、时间', trigger: 'blur'}
        ],
        upper: [
          {required: true, message: '上限人数不能为 0', trigger: 'blur'}
        ],
        sportLeader: [
          {required: true, message: '请选择活动组织人', trigger: 'blur'}
        ]
      },
      dialogFormVisibleTWO: false,
      registrationDetails: {
        sportId: '',
        sportName: '',
        userId: '',
        userName: '',
        sportAddress: '',
        startTime: '',
        endTime: '',
        sportLeader: ''
      },
      nameOptions: [{
        value: '登山',
        label: '登山'
      }, {
        value: '滑雪',
        label: '滑雪'
      }, {
        value: '垂钓',
        label: '垂钓'
      }, {
        value: '野营',
        label: '野营'
      }, {
        value: '冲浪',
        label: '冲浪'
      },{
        value: '摄影',
        label: '摄影'
      }],
      leaderOptions: [{
        value: '活动负责人1',
        label: '活动负责人1'
      }, {
        value: '活动负责人2',
        label: '活动负责人2'
      }, {
        value: '活动负责人3',
        label: '活动负责人3'
      }, {
        value: '活动负责人4',
        label: '活动负责人4'
      },{
        value: '活动负责人5',
        label: '活动负责人5'
      },
      ]
    }
  },
  components: {
    AddOrUpdate
  },
  methods: {
    /**
     * 根据户外运动编号获取户外报名信息
     */
    getDataListBySportId() {
      if (this.sportId === '') {
        this.query();
      } else {
        this.dataListLoading = true;
        this.$http.get('demo/dhsportapplyinfo/getSportApplyInfo/' + this.sportId)
            .then(({data: res}) => {
              this.dataListBySportId.push(res.data);
              this.dataList = this.dataListBySportId;
              this.dataListBySportId = [];
              this.dataListLoading = false;
            }).catch(_ => {
        })
      }
    },
    /**
     * 发起新的户外活动
     * @param formName
     */
    newSport(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$http.post('demo/dhoutdorsportinfo/newSport', {
            sportName: this.newSportForm.sportName,
            sportAddress: this.newSportForm.sportAddress,
            startTime: this.newSportForm.startTime,
            endTime: this.newSportForm.endTime,
            upper: this.newSportForm.upper,
            sportLeader: this.newSportForm.sportLeader,
            traffic: this.newSportForm.traffic
          })
              .then(({data: res}) => {
                this.$message({
                  type: 'success',
                  message: '新建活动成功！'
                })
                this.dialogFormVisibleONE = false;
              }).catch(_ => {
          })
        } else {
          return false;
        }
      });
    },
    /**
     * 重置表单信息
     * @param formName
     */
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    /**
     * 查看报名详情,活动信息，报名用户信息
     * @param sportId
     * @param userId
     */
    viewDetails(sportId, userId) {
      this.registrationDetails.sportId = sportId;
      this.registrationDetails.userId = userId;
      this.getSportInfo(sportId);
      this.getSportAddInfo(sportId);
      this.getUserName(userId);
      this.dialogFormVisibleTWO = true;
    },
    /**
     * 根据户外运动编号获取运动信息
     * @param sportId
     */
    getSportInfo(sportId) {
      this.$http.get('demo/dhoutdorsportinfo/getSportInfo/' + sportId)
          .then(({data: res}) => {
            this.registrationDetails.sportName = res.data.sportName;
            this.registrationDetails.startTime = res.data.startTime;
            this.registrationDetails.endTime = res.data.endTime;
          }).catch(_ => {
      })
    },
    /**
     * 根据户外运动编号获取户外运动附加信息
     * @param sportId
     */
    getSportAddInfo(sportId) {
      this.$http.get('demo/dhoutdorsportaddinfo/getSportAddInfo/' + sportId)
          .then(({data: res}) => {
            this.registrationDetails.sportAddress = res.data.sportAddress;
            this.registrationDetails.sportLeader = res.data.sportLeader;
          }).catch(_ => {
      })
    },
    /**
     * 获取租物人姓名
     * @param userId
     */
    getUserName(userId) {
      this.$http.get('demo/dhuserinfo/getRentUserName/' + userId)
          .then(({data: res}) => {
            this.registrationDetails.userName = res.data.userName;
          }).catch(_ => {
      })
    }
  }
}
</script>
